What is Semantic HTML
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup.
Examples of semantic HTML tags include the header tags <h1> through <h6>, <blockquote>, <code> and <em>. There are many more semantic HTML tags that can be used as you build a standards-compliant website.
<abbr> | Abbreviation |
<acronym> | Acronym |
<blockquote> | Long quotation |
<address> | Address for author(s) of the document |
<cite> | Citation |
<code> | Code reference |
<tt> | Teletype text |
<div> | Logical division |
<del> | Deleted text |
<em> | Emphasis |
<strong> | Strong emphasis |
<h1> | First-level headline |
<h2> | Second-level headline |
<h3> | Third-level headline |
<h4> | Fourth-level headline |
<h5> | Fifth-level headline |
<h6> | Sixth-level headline |
<hr> | Thematic break |
<kbd> | Text to be entered by the user |
<pre> | Pre-formatted text |
<q> | Short inline quotation |
<samp> | Sample output |
<sub> | Subscript |
<sup> | Superscript |
<var> | Variable or user defined text |